// 从react-redux中引入useDispatch和useSelector
// useDispatch 返回 store.dispatch
// useSelector 用来获取和过滤state中的数据
import { useDispatch, useSelector } from 'react-redux'
// 引入action
import { add, sub, asyncUpdMsg } from '@/store/modules/count'

export default function Test() {
  const dispatch = useDispatch()
  const state = useSelector((state) => {
    return state.count
  })
  return (
    <div style={{ border: '2px solid #aaabbb', padding: '20px' }}>
      <h1>Count组件</h1>

      <div>{state.count}</div>
      <div>{state.msg}</div>

      <button
        onClick={() => {
          //   dispatch({ type: 'countSlice/add' })
          dispatch(add())
        }}
      >
        +
      </button>

      <button
        onClick={() => {
          // action对象：{ type: 'countSlice/sub', payload: 2 }
          //   dispatch({ type: 'countSlice/sub', payload: 2 })
          dispatch(sub(2))
        }}
      >
        -
      </button>

      <button
        onClick={() => {
          dispatch(asyncUpdMsg())
        }}
      >
        点击异步修改msg的值
      </button>
    </div>
  )
}
